<template>
    <qf-table :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 产品图片 -->
        <template v-slot:orderDetail[0].imageUrl="{ row }">
            <img :src="row.orderDetail[0].imageUrl" width="80">
        </template>
        <!-- 操作按钮 -->
        <template v-slot:action="{ row }">
            <el-button size="small" type="primary" :disabled="row.order_status === 4">去支付</el-button>
            <el-button size="small" type="danger">删除</el-button>
        </template>
        <!-- 支付状态 -->
        <template v-slot:pay_status="{row}">
            {{row.pay_status === 0 ? "未支付" : "已支付"}}
        </template>
        <!-- 订单状态 -->
        <template v-slot:order_status="{row}">
            {{oderStatus(row)}}
        </template>
    </qf-table>
</template>
<script setup>
import * as api from "@/api/pay"
import qfTable from "@/components/qfTable/index.vue"
import { ref } from "vue"
//定义表格的列
let columns = ref([
    {
        label: '产品图片',
        prop: 'orderDetail[0].imageUrl'
    },
    {
        label: '订单编号',
        prop: 'order_id'
    },
    {
        label: '产品名称',
        prop: 'orderDetail[0].productName'
    },
    {
        label: '数量',
        prop: 'orderDetail[0].quantity'
    },
    {
        label: '总价格',
        prop: 'total_fee'
    },
    {
        label: '创建时间',
        prop: 'create_time'
    },
    {
        label: '支付状态',
        prop: 'pay_status'
    },
    {
        label: '订单状态',
        prop: 'order_status'
    },
    {
        label: '操作',
        prop: 'action'
    }

])
//表格数据
let tableData = ref([])
//请求数据
//声明一个loading动画
let tableLoading = ref(false)
let getList = async () => {
    tableLoading.value = true
    try {
        let res = await api.getOderApi()
        tableData.value = res.data.data
        tableLoading.value = false
    } catch (e) {
        console.log(e);
        tableLoading.value = false
    }
}
getList()
//订单状态
//订单状态：0未提交；1提交成功；2已经取消；3无效订单；4交易关闭；5退货
let oderStatus = (row) =>{
    switch (row.order_status){
        case 0:
            return '未提交'
            
        case 1:
            return '提交成功'
           
        case 2:
            return '已经取消'
            
        case 3:
            return '无效订单'
        
        case 4:
            return '交易关闭'
        
        case 5:
            return '退货'
       
    }
}
</script>
<script>
export default {
    meta: {
        title: 'order',
        name: '订单管理',
        routeName: 'order',
        icon: 'icon-dd'
    }
}
</script>